<!doctype html><html class="ifnojs"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uuAltCSS.js - README</title>
<style type="text/css">
@import url(README.css);
html.iffx2 .star {
  display: -moz-inline-box;
}
.star {
  display: inline-block;
  width: 50px;
  height: 24px;
  background: none no-repeat center bottom;
  font-size: small;
  font-weight: bold;
  color: gray;
}
.lv5 { background-image: url(img/5star.gif); }
.lv4 { background-image: url(img/4star.gif); }
.lv3 { background-image: url(img/3star.gif); }
.lv2 { background-image: url(img/2star.gif); }
.lv1 { background-image: url(img/1star.gif); }
.lv0 { background-image: url(img/0star.gif); }
table.rate>tbody>tr>td:nth-last-child(-n+5) {
  text-align: center;
}
table.rate>tbody>tr>:first-child {
  text-align: left;
  font-weight: normal;
  width: 350px;
}
/* for view box */
b.nodetxt {
  color: white;
  background-color: green;
}
b.viewtxt {
  color: white;
  background-color: #609;
}
b.paddtxt {
  color: white;
  background-color: navy;
}
b.point {
  color: black;
  background-color: yellow;
}
.viewbox {
  padding: 20px; /* shadow padding */
  border: 1px solid #609;
}
.shadow {
  -uu-box-shadow: steelblue 1px 1px 40px;
}
.radius {
  color: white; font-weight: bold;
  background-color: blue;
  border: 2px solid navy;
  -uu-border-radius: 10em 5em 10em 5px;
}
.excssnode {
  border-color: green;
}

</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "img";
</script>
<!--
<script src="../src/uuMeta.js"></script>
<script src="../src/uuMeta.cdsl.js"></script>
<script src="../src/uuMeta.data.js"></script>
<script src="../src/uuMeta.normalize.js"></script>
<script src="../src/uuMeta.event.resize.js"></script>
<script src="../src/uuCodec.js"></script>
<script src="../src/uuToken.js"></script>
<script src="../src/uuImage.js"></script>
<script src="../src/uuStyle.js"></script>
<script src="../src/uuStyle.shadow.js"></script>
<script src="../src/uuStyle.opacity.js"></script>
<script src="../src/uuStyleSheet.js"></script>
<script src="../src/uuQuery.js"></script>
<script src="../src/uuColor.js"></script>
<script src="../src/uuCanvas.js"></script>
<script src="../src/uuCanvas.extend.js"></script>
<script src="../src/uuLayer.js"></script>
<script src="../src/uuCSSValidator.js"></script>
<script src="../src/uuAltCSS.js"></script>
<script src="../src/uuAltCSS.ie.js"></script>
<script src="../src/uuAltCSS.boxeffect.js"></script>
<script src="../src/uuAltCSS.imports.js"></script>
<script src="../src/uuAltCSS.cleanup.js"></script>
<script src="../src/uuAltCSS.calcspec.js"></script>
 -->
<script src="uuAltCSS.js"></script>

</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>
<hr />
<h1>uuAltCSS.js</h1>
<p lang="ja">
  uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。<br />
  独自のアプローチで、ブラウザ と CSS を切り離し、
  古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。
  また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。
</p>
<hr />
<h2>Features - 特徴</h2>
<ul>
  <li>CSS3 Selector ready
      <br /><span lang="ja"> - CSS3 セレクタによる Webページデザインが可能になります。</span>
  </li>
  <li>No! CSS Hack
      <br /><span lang="ja"> - CSS Hack は一切使えません。
      ブラウザ毎のレンダリングの違いは<a href="CLASS.htm#cdsl">コンディショナルセレクタ</a>でスマートに解決できます。</span>
  </li>

  <li>Include cutting-edge technologies
      <br /><span lang="ja"> - 未来の技術を先取り。<a href="#spfunc">豪華なオマケ</a>付きです。</span>
  </li>
  <li>Acid2 Safe
      <br /><span lang="ja"> - uuAltCSS.js を組み込んでも、
          <a href="http://www.webstandards.org/files/acid2/test.html">Acid2</a> テストに 
          <a href="http://d.hatena.ne.jp/uupaa/20090706/1246888762">悪影響</a>を与えません。
          ブラウザのレンダリングバグを無理に改善するようなことはせず、
          ブラウザに不足している機能を追加します。
          <br /><a class="run" href="demo/acid/Acid2+js.htm">Run Acid2 + uuAltCSS.js</a></span>
  </li>
</ul>

<hr />
<h2>Browser support - サポートするブラウザ</h2>
<ul>
 <li><img src="img/c32.alpha.png" alt="" />Google Chrome</li>
 <li><img src="img/s32.alpha.png" alt="" />Safari 3+</li>
 <li><img src="img/i32.alpha.png" alt="" />IE 6+ <i>(IE6 の Quirks モードはサポートしない)</i></li>
 <li><img src="img/o32.alpha.png" alt="" />Opera 9.2+ <i>(-uu-xxx は Opera9.5+ 限定)</i></li>
 <li><img src="img/f32.alpha.png" alt="" />Firefox 2+ <i></i></li>
</ul>

<h2>Support information - サポート情報</h2>
<p>Support level<br /><span lang="ja">サポート状況を★の数で表現しています。</span></p>
<blockquote style="background: #122; padding: 10px">
<p><span class="star lv5"></span> 5: supported. - <span lang="ja">サポートしています。</span></p>
<p><span class="star lv4"></span> 4: There is a limitation or the result is somewhat different. - <span lang="ja">制限があるか、結果が多少異なります。</span></p>
<p><span class="star lv2"></span> 2: There are a few problems. - <span lang="ja">多少の問題があります。</span></p>
<p><span class="star lv1"></span> 1: There is a fatal problem. - <span lang="ja">致命的な問題や大きな制限があります。</span></p>
<p><span class="star lv0"></span> 0: unsupported. - <span lang="ja">サポートしていません。</span></p>
</blockquote>

<h3>CSS3 Selector</h3>

<p lang="ja">
  <a href="http://www.w3.org/TR/css3-selectors/#selectors">CSS3 Selector</a>
  を使った CSS を解釈し要素にスタイルを適用します。
</p>
<p lang="ja">uuAltCSS.js は以下の擬似要素や擬似クラスをサポートしません。ブラウザがネイティブにサポートしている場合にのみ利用可能です。
</p>

<table class="rate">
<thead>
<tr>
  <th style="text-align: center">CSS Selector</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</thead>
<tfoot>
<tr>
  <th style="text-align: center">CSS Selector</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</tfoot>
<tbody>
<tr>
  <td>
    E:active <br />
    E:focus <br />
    E::after <br />
    E::before
  </td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">8+</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>
    E::first-line <br />
    E::first-letter
  </td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
</tbody>
</table>

<h3>Special function - 特別な機能<a id="spfunc"></a></h3>
<p lang="ja">以下にあげる特別な機能や、CSS3 プロパティが利用可能になります。
<br />CSS3 プロパティの多くは、動的なスタイルの変更をサポートしておらず、
完全に本来の機能や仕様を模倣しているわけではありません。あくまで擬似的なものです。注意してご利用ください。</p>
<p lang="ja">-uu-xxx 系の CSS3 プロパティを多用すると、ページロード時のレンダリングに時間が掛かるようになります。
window.UUMETA_DEBUG = 1 を設定すると、ステータスバーに処理時間が表示されるようになりますので、目安にしてください。
<br />目安としては、ネットブックの IE6 上で、1000～1500ms 以内にレンダリングが完了するようなページ構成にすることをお勧めします。
</p>

<!--
<div class="fxd">
.fxd { position: fixed; bottom: 1em; right: 1em; opacity: 0.5; }
</div>
 -->

<table class="rate">
<thead>
<tr>
  <th style="text-align: center">Special function / Property</th>
  <th><a href="#cssonly">CSS only</a></th>
  <th><a href="#viewbox">View box</a></th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</thead>
<tfoot>
<tr>
  <th style="text-align: center">Special function / Property</th>
  <th><a href="#cssonly">CSS only</a></th>
  <th><a href="#viewbox">View box</a></th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</tfoot>
<tbody>
<tr>
  <td>
    <a href="CLASS.htm#cdsl">コンディショナルセレクタ</a><br /><a class="run" href="demo/conditional-selector/consel.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td>
    <a href="CLASS.htm#uuAltCSS">CSS の部分再評価, 全体再評価</a>
    <br />uuAltCSS(context, rebuild, css)
    <br /><a class="run" href="demo/revalidate_context/tab.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td>
    <a href="CLASS.htm#getExStyle">拡張スタイルの取得</a>,
    <a href="CLASS.htm#setExStyle">設定</a>,
    <a href="CLASS.htm#redraw">再描画</a>
    <br />uuAltCSS.getExStyle(node, prop)
    <br />uuAltCSS.setExStyle(node, prop, value, redraw)
    <br />uuAltCSS.redraw()
    <br /><a class="run" href="demo/exstyle/getExStyle.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#boot">ブートローダー</a><br />
      window.boot()
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td>window.<a href="http://code.google.com/p/uupaa-js-spinoff/">uuQuery()</a>
      <br />(CSS3::querySelectoAll)
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td>window.<a href="http://code.google.com/p/uupaa-js-spinoff/">uuCanvas()</a>
      <br />(HTML5::Canvas)
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td>
    <a href="CLASS.htm#posfxd">position: fixed</a>
    <br /><a class="run" href="demo/position_fixed/position_fixed_px.htm">DEMO</a>
  </td>
  <td>YES</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">Ex6</span><br />
      <span class="star lv5"></span><br />
      <span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>
    position: absolute
    <br /><a class="run" href="demo/position_absolute/absolute.htm">DEMO</a>
    <br />テキスト選択不能バグをfix<br />
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">Ex6</span><br />
      <span class="star lv5"></span><br />
      <span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<!--
<tr>
  <td>
    全要素で :hover
    <br /><a class="run" href="demo/pseudo_hover/hover.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">Ex6</span><br />
      <span class="star lv5"></span><br />
      <span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
 -->
<tr>
  <td>
    <a href="CLASS.htm#alphapng">&lt;img src="透過.alpha.png"&gt;</a>
    <br /><a class="run" href="demo/alphapng/alphapng.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">Ex6</span><br />
      <span class="star lv5"></span><br />
      <span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="CLASS.htm#maxmin">max-width:</a> min-width:
    <br />max-height: min-height:
    <br /><a class="run" href="demo/max-width/max-width.htm">DEMO</a> 
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">Ex6</span><br />
      <span class="star lv5">Ex7</span><br />
      <span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="CLASS.htm#opacity">opacity:</a>
    <br /><a class="run" href="demo/opacity/opacity.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">Ex6</span><br />
      <span class="star lv4">Ex7</span><br />
      <span class="star lv4">Ex8</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td><a href="CLASS.htm#displaytable">-uu-display: table</a>
    <br /><a class="run" href="demo/display_table/display_table.htm">DEMO</a>
          <a class="run" href="demo/box-reflect/pict.htm">DEMO</a>
  </td>
  <td>YES</td>
  <td>-</td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv2">Ex6</span><br />
      <span class="star lv2">Ex7</span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td></tr>
<tr>
  <td><a href="CLASS.htm#textshadow">-uu-text-shadow:</a>
    <br /><a class="run" href="demo/text-shadow/text-shadow.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>-</td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv2">Ex6</span><br />
      <span class="star lv2">Ex7</span><br />
      <span class="star lv2">Ex8</span></td>
  <td><span class="star lv0"></span><br />
      <span class="star lv0"></span><br />
      <span class="star lv0"></span></td>
  <td><span class="star lv0"></span><br />
      <span class="star lv0"></span><br />
      <span class="star lv0"></span></td></tr>
<tr>
  <td><a href="CLASS.htm#boxshadow">-uu-box-shadow:</a>
    <br /><a class="run" href="demo/box-shadow/box-shadow.htm">DEMO</a>
          <a class="run" href="demo/box-shadow/box-shadow+grad.htm">DEMO</a>
          <a class="run" href="demo/box-shadow/box-shadow_em.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#boxreflect">-uu-box-reflect:</a>
    <br /><a class="run" href="demo/box-reflect/box-reflect.htm">DEMO</a>
          <a class="run" href="demo/box-reflect/pict.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv2">Extend</span></td>
  <td><span class="star lv2">Extend</span></td>
  <td><span class="star lv2">Extend</span></td>
  <td><span class="star lv2">Extend</span></td>
  <td><span class="star lv2">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#bradius">-uu-border-radius:</a>
    <br /><a class="run" href="demo/border-radius/border-radius+4corner.htm">DEMO</a>
          <a class="run" href="demo/border-radius/border-radius+shadow.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#gradient">-uu-gradient()</a>
    <br /><a class="run" href="demo/gradient/gradient1.htm">DEMO</a>
          <a class="run" href="demo/gradient/gradient2.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#mbg">multiple backgrounds</a><br />
    -uu-background:<br />
    -uu-background-image:<br />
    -uu-background-repeat:<br />
    -uu-background-position:
    <br /><a class="run" href="demo/multibg/demo.htm">DEMO</a>
          <a class="run" href="demo/multibg/tiling.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td>
  <td><span class="star lv4">Extend</span></td></tr>
<tr>
  <td><a href="CLASS.htm#boxeffect">-uu-box-effect:</a>
    <br /><a class="run" href="demo/box-effect/box-effect.htm">DEMO</a>
  </td>
  <td>-</td>
  <td>NEED</td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td>
  <td><span class="star lv5">Extend</span></td></tr>
</tbody>
</table>

<h3>Native function - ネイティブな機能<a id="nativefunc"></a></h3>
<p lang="ja">uuAltCSS.js が提供する機能と
ブラウザがネイティブに提供する機能は併用可能です。</p>

<table class="rate">
<thead>
<tr>
  <th style="text-align: center">Special function / Property</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</thead>
<tfoot>
<tr>
  <th style="text-align: center">Special function / Property</th>
  <th><img src="img/c32.alpha.png" alt="" /></th>
  <th><img src="img/s32.alpha.png" alt="" /></th>
  <th><img src="img/i32.alpha.png" alt="" /></th>
  <th><img src="img/o32.alpha.png" alt="" /></th>
  <th><img src="img/f32.alpha.png" alt="" /></th></tr>
</tfoot>
<tbody>
<tr>
  <td>display: table</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5">8+</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td></tr>
<tr>
  <td>text-shadow:</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv4">9.5+</span></td>
  <td><span class="star lv5">3.5+</span></td></tr>
<tr>
  <td>-webkit-box-shadow:<br />-moz-box-shadow:</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv5">3.5+</span></td></tr>
<tr>
  <td>-webkit-box-reflect:</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td></tr>
<tr>
  <td>-webkit-border-radius:<br />-moz-border-radius:</td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv1">2</span><br />
      <span class="star lv5">3+</span></td></tr>
<tr>
  <td>-webkit-gradient()</td>
  <td><span class="star lv5">4+</span></td>
  <td><span class="star lv5"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td>
  <td><span class="star lv0"></span></td></tr>
</tbody>
</table>

<hr />
<h2>CSS Only function - CSS 限定機能<a id="cssonly"></a></h2>
<p lang="ja">
  CSS3 の構文を理解しないブラウザでは、
  multiple background image や display: table などを
  インラインスタイル(&lt;div style="..."&gt;)で指定することができません。
  また JavaScript からこれら機能にアクセスする方法もありません。
  CSS Only の機能は、埋め込み CSS または 外部 CSS で指定する必要があります。
</p>

<hr />
<h2>Viewbox - ビューボックス<a id="viewbox"></a></h2>
<p lang="ja">
  拡張CSS(-uu-box-shadow: 等)が設定された<b class="nodetxt">要素(ExCSSNode)</b>には、
  要素を包括する<b class="viewtxt">ブロックレベル要素(ViewBox)</b> が必要です。
  <br />インラインレベル要素(span など)は ViewBox にはなれません。
</p>
<p lang="ja">
  -uu-box-shadow: を使用する場合は、
  ViewBox に<b class="paddtxt">余白(shadow padding)</b>を設定します。
  影は ViewBox の余白部分にレンダリングするため、余白が十分にないと影が途中で切れてしまいます。
</p>
  <div class="viewbox" title="viewbox">
    <div class="excssnode shadow radius" title="excssnode">
      <pre>
  &lt;style&gt;
    .viewbox {
      padding: 20px; <b class="paddtxt">/* shadow padding */</b>
      border: 1px solid #609;
    }
    .shadow {
      <b>-uu-box-shadow:</b> steelblue 1px 1px 40px;
    }
    .radius {
      color: white; font-weight: bold;
      background-color: blue;
      border: 2px solid navy;
      <b>-uu-border-radius:</b> 10em 5em 10em 5px;
    }
    .excssnode {
      border-color: green;
    }
  &lt;/style&gt;
  <b class="viewtxt">&lt;div class="viewbox" title="viewbox"&gt;</b>
    <b class="nodetxt">&lt;div class="excssnode shadow radius" title="excssnode"&gt;</b>
      CONTENT ...
      CONTENT ...
      CONTENT ...
    <b class="nodetxt">&lt;/div&gt;</b>
  <b class="viewtxt">&lt;/div&gt;</b>
      </pre>
    </div>
  </div>
<p lang="ja">
  ExCSSNode 一つに対し 一つの ViewBox を用意します。複数の ExCSSNode を一つの ViewBox に纏めて格納することはできません。
  <br />ViewBox には ViewBox を入れ子にできます。
</p>
<p lang="ja">
  IE6, IE7 では、ExCSSNode 内部の デフォルトマージン(margin-top: 1em, margin-bottom: 1em)やパディングが消えてしまう現象が発生することがあります。
  <br />reset.css 等の方法で一旦暗黙の余白をリセットし、改めて設定することにより現象を回避できます。
</p>

<hr />
<h2>Global name space pollution - グローバルネームスペース汚染</h2>
<p><span lang="ja">uuAltCSS.js を読み込むと、グローバルネームスペースに以下のオブジェクトが追加されます。</span></p>
<ul>
  <li>window.uuqid - UNIQUE-ID 生成用カウンタ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuMeta.js">window.uuMeta</a> - メタ情報, common functions</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuToken.js">window.uuToken</a> - トークンセパレータ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuColor.js">window.uuColor</a> - カラーハンドラ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuCodec.js">window.uuCodec</a> - コーデックハンドラ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuStyle.js">window.uuStyle</a> - スタイルハンドラ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuImage.js">window.uuImage</a> - イメージハンドラ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuStyleSheet.js">window.uuStyleSheet</a> - スタイルシートハンドラ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuCSSValidator.js">window.uuCSSValidator</a> - CSS3 Declaration パーサ, バリデータ</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuQuery.js">window.uuQuery</a> - CSS3::querySelectorAll API</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuCanvas.js">window.uuCanvas</a> - HTML5::Canvas API</li>
  <li><a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuLayer.js">window.uuLayer</a> - レイヤーハンドラ, Canvas ラッパー API</li>
  <li>window.uuAltCSS - CSS Executor</li>
</ul>

<p lang="ja">uuAltCSS.js ユーザは、これらの機能も利用可能になります。</p>

<hr />
<h2>Installation - 導入方法</h2>
<p>1. <span lang="ja">CSS を用意してください。外部 CSS も利用できます</span></p>
<pre class="eg">
  &lt;style type="text/css"&gt;
    ul.demo &gt; li:nth-child(even) { background-color: gray; }
  &lt;/style&gt;
</pre>
<p>2. <span lang="ja">Silverlight 用の特別なスクリプト要素を定義し、
    その後方で uuAltCSS.js を読み込んでください。</span></p>
<pre class="eg">
  &lt;script type="text/xaml" id="xaml"&gt;&lt;?xml version="1.0"?&gt;
      &lt;Canvas xmlns="http://schemas.microsoft.com/client/2007"&gt;&lt;/Canvas&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/uuAltCSS.js"&gt;&lt;/script&gt;
</pre>

<p>3. <span lang="ja">開発中はデバッグモード(UUMETA_DEBUG = 1)にしてください。デバッグモード OFF の状態では例外が補足できません。
  <br />透過png を IE6 で処理するには、UUMETA_IMAGE_DIR の設定も必要になります。
  <br />max-width: 系のプロパティを IE6, IE7 で使用する場合は、UUALTCSS_ENABLE_MAXMIN = 1 の設定も必要になります。
</span></p>
<pre class="eg">
&lt;script type="text/javascript"&gt;
  window.UUMETA_DEBUG = 1;
  window.UUMETA_IMAGE_DIR = "../img";
  window.UUALTCSS_ENABLE_MAXMIN = 1;
&lt;/script&gt;
</pre>

<p>4. <span lang="ja">JavaScript 有効/無効でスタイルを変化させたい場合は、以下のように HTML を記述します。
</span></p>
<pre class="eg">
&lt;!doctype html&gt;
&lt;html <b>class="ifnojs"</b>&gt;
&lt;head&gt;...&lt;/head&gt;
&lt;body&gt;...&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>5. <span lang="ja">具体的には、このようにします。</span></p>

<a href="demo/helloworld.htm" class="run">RUN</a>
<pre class="eg">
&lt;!doctype html&gt;&lt;html <b>class="ifnojs"</b>&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;
<b>&lt;style type="text/css"&gt;
  ul.demo &gt; li:nth-child(even) { background-color: gray; }
&lt;/style&gt;</b>
<b>&lt;script type="text/xaml" id="xaml"&gt;&lt;?xml version="1.0"?&gt;
    &lt;Canvas xmlns="http://schemas.microsoft.com/client/2007"&gt;&lt;/Canvas&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  window.UUMETA_DEBUG = 1;
  window.UUMETA_IMAGE_DIR = "../img";
  window.UUALTCSS_ENABLE_MAXMIN = 1;
&lt;/script&gt;
&lt;script type="text/javascript" src="../js/uuAltCSS.js"&gt;&lt;/script&gt;</b>
&lt;/head&gt;
&lt;body&gt;
  &lt;ul class="demo"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<hr />
<h2>Development - 開発</h2>
<h3>開発者ツールによるデバッグ</h3>
<p lang="ja">
IE8 では、開発者ツールを起動した状態で uuAltCSS.js を実行すると、<a href="http://d.hatena.ne.jp/uupaa/20090612/1244800672">意図したレンダリングが行われない</a>ケースがあります。
<br />-uu-xxx などの拡張されたCSSを適用しつつ、任意の場所で実行を中断したい場合は、以下の手順を踏んでください。</p>
<ul>
  <li>開発者ツールを起動する</li>
  <li>左上の[スクリプト]タブをクリックし、任意のソースコードを選択</li>
  <li>ソースコード上にブレークポイントを設定し、[デバッグ開始]ボタンをクリック</li>
  <li>開発者ツールを閉じる</li>
  <li>ページをリロードするか、何らかのアクションを起こすと、開発者ツールが自動的に立ち上がり、ブレークポイントでコードが停止する</li>
</ul>
<h3>IE6で発生するページのオートリロード</h3>
<p lang="ja">
IE6 が理解できない CSS を含んだページをロードすると、<a href="http://d.hatena.ne.jp/uupaa/20090619/1245348504">自動的にリロード</a>を行います。
</p>
<p lang="ja">
window.boot() や uuMeta.boot() はこの問題に対処済みです。
</p>

<hr />
<h2>Links</h2>
<ul>
  <li><a href="http://developer.apple.com/documentation/appleapplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-border-radius">Safari Supported CSS Properties</a></li>
  <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">-webkit-box-shadow spec</a></li>
  <li><a href="http://webkit.org/blog/182/css-reflections/">-webkit-box-reflect spec</a></li>
  <li><a href="http://www.w3.org/TR/css3-background/#the-border-radius">-webkit-border-radius spec</a></li>
  <li><a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html#//apple_ref/doc/uid/TP40008032-CH7-SW11">-webkit-gradient() spec</a></li>
</ul>

</body>
</html>
